<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .clearFix:after,
        .clearFix:before{
            clear: both;
            height: 0;
            line-height: 0;
            visibility: hidden;
            display: block;
            content: "";
        }
        .container{
            max-width: 640px;
            min-width: 320px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .container>ul:first-child{
            width: 1000%;
            transform: translateX(-10%);
        }
        .container>ul:first-child>li{
            width: 10%;
            float: left;
        }
        .container>ul:first-child>li>a{
            display: block;
            width: 100%;
        }
        .container>ul:first-child>li>a>img{
            display: block;
            width: 100%;
        }
        .container>ul:last-child{
            position: absolute;
            left: 50%;
            margin-left: -66px;
            bottom: 6px;
        }
        .container>ul:last-child>li{
            float: left;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: pink;
            margin-left: 6px;
        }
        .container>ul:last-child>li.active{
            background: red;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="clearFix">
        <li><a><img src="l8.jpg"></a></li>
        <li><a><img src="l1.jpg"></a></li>
        <li><a><img src="l2.jpg"></a></li>
        <li><a><img src="l3.jpg"></a></li>
        <li><a><img src="l4.jpg"></a></li>
        <li><a><img src="l5.jpg"></a></li>
        <li><a><img src="l6.jpg"></a></li>
        <li><a><img src="l7.jpg"></a></li>
        <li><a><img src="l8.jpg"></a></li>
        <li><a><img src="l1.jpg"></a></li>
    </ul>
    <ul class="clearFix">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script src="src/zepto.js"></script>
<script src="src/touch.js"></script>
<script src="src/fx.js"></script>
<script src="src/fx_methods.js"></script>
<script src="src/selector.js"></script>
<script src="src/event.js"></script>

<script src="src/event.js"></script>
<script>
    $(function () {
        var $banner=$(".container");
        var $width=$banner.width();

        var $imageBox=$banner.find("ul:first-child");
        var $pointBox=$banner.find("ul:last-child");

        var $points=$pointBox.find("li");

        var animationFuc=function () {
            $imageBox.animate({transform:'translateX('+(-index*$width)+'px)'},200,function () {
                if(index>=9){
                    index=1;
                    $imageBox.css({transform:'translateX('+(-index*$width)+'px)'});
                }else if(index<=0){
                    index=8;
                    $imageBox.css({transform:'translateX('+(-index*$width)+'px)'});
                }
                $points.removeClass('active').eq(index-1).addClass('active');
            })
        };

        var index=1;
        var timer=setInterval(function () {
            index++;
            animationFuc();
        },5000);

        /*左手 下一张*/
        $banner.on('swipeLeft',function () {
            index ++;
            animationFuc();
        });
        /*右滑的手势  上一张*/
        $banner.on('swipeRight',function () {
            index --;
            animationFuc();
        });

    })
</script>
</html>